<template>
  <div>
    <span>欢迎光顾</span>
    <div>
      <ul>
        <li>苹果{{ danjia }}￥/斤，优惠{{ dazhe * 10 }}折</li>
        <li>
          请输入你要购买的数量<input type="number" v-model="shuliang" />斤
        </li>
        <li>
          <button @click="suan">结账</button>
        </li>
        <li>
          <span>总价{{ zongjia }} 元</span>
          <span>折扣价{{ zhekou }} 元</span>
          <span>优惠{{ shifu }} 元</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      danjia: 10,
      dazhe: 0.8,
      shuliang: 0,
      zongjia: 0,
      zhekou: 0,
      shifu: 0,
    };
  },
  methods: {
    suan() {
      this.zongjia = this.danjia * this.shuliang;
      this.zhekou = this.zongjia * this.dazhe;
      this.shifu = this.zongjia - this.zhekou;
    },
  },
};
</script>

<style>
</style>